<template>
  <div class="AdendDialog">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="ruleForm.age" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="ruleForm.sex" label="男">男</el-radio>
            <el-radio v-model="ruleForm.sex" label="女">女</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="号码" prop="phone">
            <el-input
              v-model="ruleForm.phone"
              placeholder="请输入电话号码"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    close: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      ruleForm: {
        name: "",
        age: "",
        sex: "",
        phone: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$server.addData(this.ruleForm).then((res) => {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            // 关闭弹框
            this.close();
            this.ruleForm.sex = "";
            this.ruleForm.phone = "";
            this.ruleForm.name = "";
            this.age = "";
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.close();
    },
  },
};
</script>

<style>
</style>